import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'

import Table from './Table'
import NavLink from './NavLink'
import style from './addStore.css'
import { myAjaxJson, ROOTURL} from './../publicAPI/publicAPI'

class AssistantM extends Component {

	constructor (props, context) {
	    super(props, context);
	    console.log("初始化");
	    this.state = {
	    	//page: 1,
	    	delete: false,
	    	deleteId: '',
	    	assistantData: [],
	    }; // 初始化状态
	}

	

	componentWillMount() {
		console.log("将安装");
		let _this = this;
		this.handleGetInfo();
	}

	componentDidMount() {
	    console.log("安装成功");

	}

	handleGetInfo() {
		let _this = this;
		myAjaxJson(ROOTURL +'servant/profile/search.api', 'POST', {}, function(data) {
			//console.log(data);
			let assistant = data.filter(function(servantData) {
			    if((!servantData.dd)&&servantData.meta.isAssistant) {
			            /*if(servantData.meta.shop == shopSelect) {
			            	return true
			            } else return false*/
			        return true
			    } else return false 
			});
			console.log(assistant);
			this.setState({
			    assistantData: assistant,
			});
		}.bind(_this), function(error) {})
	}

	handleClick() {

	}

	handleDelete(id) {
		this.setState({
			delete: !this.state.delete,
			deleteId: id
		})
	}

	deleteAssistant(){
			var _this = this;

			myAjaxJson(ROOTURL + 'user/barber-assist/instance.api?id=' + this.state.deleteId, 'DELETE', {}, function(data) {
				console.log(data);
				myAjaxJson(ROOTURL + 'barber/profile/instance.api?id=' + _this.state.deleteId, 'DELETE', {}, function(data) {
					console.log(data);
					console.log('delete success');
					_this.handleGetInfo();
				}, function(error) { alert('删除失败') })
			}, function(error) { alert('删除失败') })

			_this.setState({
				delete: !_this.state.delete
			});
	}

	tHead() {
		var data = [
			{name: "id"},
			{name: "名称"},
			{name: "手机号"},
			{name: "所属门店"},
			{name: "操作"}
		];
		const _headArr = [];
		const _width = {
			"0" : "17.6%",
			"1" : "16.3%",
			"2" : "17.8%",
			"3" : "22.6%",
			"4" : "22.7%"
		};
		//_headArr.push(<th style={{width:'5%'}} role="1" key='' onClick={(e) => this.handleSelect(e)}></th>)
		_headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1" key={index}>{item.name}</th>))
		return _headArr;
	}

	tBody() {
		//console.log(this.state.assistantData);
		
 
				return this.state.assistantData.map((item) => {
					return (
						<tr key={item.id}>		
							<td>{item.id}</td>	
							<td>{item.meta.name}</td>
							<td>{item.meta.phone}</td>
							<td>{item.meta.shop}</td>
							<td>
								<span><NavLink  to={`/SalaryM/AssistantInput/${item.id}`} className="rbtn green">查看/修改</NavLink></span>
								<span className="rbtn red" onClick={this.handleDelete.bind(this, item.id)} style={{marginLeft: "15px"}}>删除</span>
							</td>
						</tr>
					)
				})

		
	}
	
    render() {
    	console.log("理发师助理管理" + "渲染")
	    return (
	    	<div>
				<div className="rt-wrap">
					<h2 className="catagory">
						<span className="cata-title">理发师助理管理</span>
						<Link to={`/SalaryM/AssistantInput`}>
							<button className="add-btn" />
						</Link>
					</h2>

					<Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()} />
				</div>
				{ this.state.delete ?
					<div id={style.msgDialog}>
						<div className={style['msgDialog_div']}><h3 id={style['msgDialog_title']}>删除提示？</h3><p id={style['msgDialog_content']}>确认删除？</p>
							<div className={style['msgDialog_button']}>
								<button id={style['msgDialog_yes']} onClick={this.deleteAssistant.bind(this)}>确定</button>
								<button id={style['msgDialog_no']} onClick={()=>this.setState({delete: !this.state.delete})}>取消</button>
							</div>
						</div>
					</div> : null
				}
	    	</div>
	    )
	  }
}

export default AssistantM
